<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>承诺书</title>
    <script src="js/vue.min.js"></script>
    <script src="js/vant.min.js"></script>
    <link rel="stylesheet" href="css/index.css"/>
</head>

<body>
<div id="app" v-cloak>
    <div class="content">
        <div class="layout">
            <!--标题-->
            <div class="title1">
                <van-image src="./img/topBacPIc.png" fit="cover"
                           style="width: 100%;"></van-image>

                <div class="titleContent">
                    查询承诺书
                </div>
                <!--                <van-icon-->
                <!--                        name="arrow-left"-->
                <!--                        size="24px"-->
                <!--                        color="#fff"-->
                <!--                        class="arrowLeft"-->
                <!--                        @click="back"-->
                <!--                />-->
            </div>
            <!--            <div class="beforeContent"></div>-->

            <!--main-->
            <div class="mainContent">
                <div class="old-card">
                    <div class="bot-pag">
                        <p>
                            致：中经互联网络有限公司（以下简称“贵公司”）</p>
                        <p>
                            本人承诺本人为该车辆所有权人，并同意将该车辆进行交易。为开展二手车交易，本人有权作出如下授权：</p>
                        <p><span>（1）</span>本人同意贵公司可为进行二手车交易的目的将所收集的本人的个人信息（包括姓名、身份证件号等）和车辆信息（包括车架号、车辆行驶证等）提供给车信盟及车信盟合作机构。
                        </p>
                        <p><span>（2）</span>本人同意车信盟及其合作机构可为协助贵公司开展二手车交易的目的使用上述信息，并基于此目的收集本人车辆的相关信息（包括但不限于车辆的注册登记、保险及出险、维修保养信息等），且车信盟及其合作机构可分别或共同对上述信息进行处理形成本人车辆的车况报告以便贵公司查询和评估，协助贵公司开展与本人的二手车交易有关事项。
                        </p>
                        <p>
                            本授权书的授权期限为自本人签署之日起30天有效。
                        </p>
                        <p>
                            本授权书是本人做出的单方承诺，效力具有独立性，不因本人与贵公司签订的相关合同解除、终止、被撤销、无效而丧失法律效力。
                        </p>
                        <p>
                            本人承诺：在开展二手车交易过程中（包括交易前及交易后全过程）所提供的所有信息及承诺均真实、准确、完整、合法、有效，并保证上述全部授权内容均经过本人的充分、完全认可。
                            如果由于本人提供的信息或承诺不真实、不准确、不完整、不合法，本人承担由此所导致的后果和全部法律责任。
                        </p>
                        <p>
                            本人已经仔细阅读本授权书全部内容，对本授权书所有条款的含义及相应的法律后果已全部知晓并充分理解。
                        </p>
                    </div>
                </div>

                <div class="selectTimeOut" @click="showPopup">
                    <van-field
                            class="selectTimeOutBtn"
                            readonly
                            label="签名有效期限"
                            :value="value"
                            placeholder="选择期限"
                            input-align="right"
                    />
                </div>
                <van-popup v-model="showPicker" round position="bottom">
                    <van-picker
                            show-toolbar
                            :columns="columns"
                            @cancel="showPicker = false"
                            @confirm="onConfirm"
                    />
                </van-popup>

                <div class="esign">
                    <div class="esignTitle">电子签名</div>
                    <div class="esignRewrite" @click="reset">重新签名</div>
                    <div class="sign-container">
                        <div class="c-img">
                            <van-button
                                    v-if="!isSigned"
                                    class="startSign"
                                    round
                                    size="large"
                                    @click="startSignBtn"
                            >开始签名
                            </van-button>
                            <canvas v-show="isSigned" ref="canvas" @mousedown="mouseDown" @mousemove="mouseMove"
                                    @mouseup="mouseUp"
                                    @touchstart="touchStart"
                                    @touchmove="touchMove" @touchend="touchEnd"></canvas>
                        </div>
                    </div>
                </div>

            </div>
            <div class="foot">
                <div class="btnArea">
                    <van-button
                            class="btn_confirm"
                            color="linear-gradient(to right, #576692, #353E67)"
                            round
                            size="large"
                            @click="accomplish"
                            :disabled="!isSigned || value == ''"
                    >确认
                    </van-button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                infoImg: '',
                methodsRadio: '',
                checked: '',
                state: {
                    time: '请仔细阅读告知书',
                    smsSendBtn: '1',
                },
                butzt: false,
                orderNumber: '',
                isSigned: false,
                //    esign配置区域
                width: 1200,
                height: 730,
                lineWidth: 8,
                lineColor: '#333',
                bgColor: '',
                isCrop: false,
                isClearBgColor: true,
                format: 'image/png',
                quality: 1,

                hasDrew: false,
                resultImg: '',
                points: [],
                canvasTxt: null,
                startX: 0,
                startY: 0,
                isDrawing: false,
                sratio: 1,
                //    结束
                value: '',
                showPicker: false,
                columns: ['30天', '60天', '90天'],
            }
        },
        computed: {
            ratio() {
                return this.height / this.width
            },
            stageInfo() {
                return this.$refs.canvas.getBoundingClientRect()
            },
            myBg() {
                return this.bgColor ? this.bgColor : 'rgba(255, 255, 255, 0)'
            }
        },
        watch: {
            'myBg': function (newVal) {
                this.$refs.canvas.style.background = newVal
            }
        },
        beforeMount() {
            window.addEventListener('resize', this.$_resizeHandler)
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.$_resizeHandler)
        },
        mounted() {
            const canvas = this.$refs.canvas
            canvas.height = this.height
            canvas.width = this.width
            canvas.style.background = this.myBg
            this.$_resizeHandler()
            // 在画板以外松开鼠标后冻结画笔
            document.onmouseup = () => {
                this.isDrawing = false
            }
        },
        methods: {
            showPopup() {
                this.showPicker = true;
            },
            onConfirm(value) {
                this.value = value;
                this.showPicker = false;
            },
            startSignBtn() {
                this.isSigned = true
                setTimeout(() => {
                    this.$_resizeHandler()
                }, 100)
            },
            back() {
                //    使用原生返回
                window.history.back()
                console.log('返回')
            },
            handleNextStep() {

            },
            $_resizeHandler() {
                const canvas = this.$refs.canvas
                // canvas.style.width = this.width + "px"
                const realw = parseFloat(this.width)
                // canvas.style.height = this.ratio * realw + "px";
                this.canvasTxt = canvas.getContext('2d')
                this.canvasTxt.scale(1 * this.sratio, 1 * this.sratio)
                this.sratio = realw / this.width
                this.canvasTxt.scale(1 / this.sratio, 1 / this.sratio)
            },
            // pc
            mouseDown(e) {
                e = e || event
                e.preventDefault()
                this.isDrawing = true
                this.hasDrew = true
                let obj = {
                    x: e.offsetX,
                    y: e.offsetY
                }
                this.drawStart(obj)
            },
            mouseMove(e) {
                e = e || event
                e.preventDefault()
                if (this.isDrawing) {
                    let obj = {
                        x: e.offsetX,
                        y: e.offsetY
                    }
                    this.drawMove(obj)
                }
            },
            mouseUp(e) {
                e = e || event
                e.preventDefault()
                let obj = {
                    x: e.offsetX,
                    y: e.offsetY
                }
                this.drawEnd(obj)
                this.isDrawing = false
            },
            // mobile
            touchStart(e) {
                e = e || event
                e.preventDefault()
                this.hasDrew = true
                if (e.touches.length === 1) {
                    let obj = {
                        x: (e.targetTouches[0].clientX - this.$refs.canvas.getBoundingClientRect().left) * 3.1,
                        y: (e.targetTouches[0].clientY - this.$refs.canvas.getBoundingClientRect().top) * 3.1
                    }
                    this.drawStart(obj)
                }
            },
            touchMove(e) {
                e = e || event
                e.preventDefault()
                if (e.touches.length === 1) {
                    let obj = {
                        x: (e.targetTouches[0].clientX - this.$refs.canvas.getBoundingClientRect().left) * 3.1,
                        y: (e.targetTouches[0].clientY - this.$refs.canvas.getBoundingClientRect().top) * 3.1
                    }
                    this.drawMove(obj)
                }
            },
            touchEnd(e) {
                e = e || event
                e.preventDefault()
                if (e.touches.length === 1) {
                    let obj = {
                        x: (e.targetTouches[0].clientX - this.$refs.canvas.getBoundingClientRect().left) * 3.1,
                        y: (e.targetTouches[0].clientY - this.$refs.canvas.getBoundingClientRect().top) * 3.1
                    }
                    this.drawEnd(obj)
                }
            },
            // 绘制
            drawStart(obj) {
                this.startX = obj.x
                this.startY = obj.y
                console.log(this.startX, this.startY)
                this.canvasTxt.beginPath()
                this.canvasTxt.moveTo(this.startX, this.startY)
                this.canvasTxt.lineTo(obj.x, obj.y)
                this.canvasTxt.lineCap = 'round'
                this.canvasTxt.lineJoin = 'round'
                this.canvasTxt.lineWidth = this.lineWidth * this.sratio
                this.canvasTxt.stroke()
                this.canvasTxt.closePath()
                this.points.push(obj)
            },
            drawMove(obj) {
                this.canvasTxt.beginPath()
                this.canvasTxt.moveTo(this.startX, this.startY)
                this.canvasTxt.lineTo(obj.x, obj.y)
                this.canvasTxt.strokeStyle = this.lineColor
                this.canvasTxt.lineWidth = this.lineWidth * this.sratio
                this.canvasTxt.lineCap = 'round'
                this.canvasTxt.lineJoin = 'round'
                this.canvasTxt.stroke()
                this.canvasTxt.closePath()
                this.startY = obj.y
                this.startX = obj.x
                this.points.push(obj)
            },
            drawEnd(obj) {
                this.canvasTxt.beginPath()
                this.canvasTxt.moveTo(this.startX, this.startY)
                this.canvasTxt.lineTo(obj.x, obj.y)
                this.canvasTxt.lineCap = 'round'
                this.canvasTxt.lineJoin = 'round'
                this.canvasTxt.stroke()
                this.canvasTxt.closePath()
                this.points.push(obj)
                this.points.push({x: -1, y: -1})
            },
            // 操作
            generate(options) {
                let imgFormat = options && options.format ? options.format : this.format
                let imgQuality = options && options.quality ? options.quality : this.quality
                const pm = new Promise((resolve, reject) => {
                    if (!this.hasDrew) {
                        reject(`Warning: Not Signned!`)
                        return
                    }
                    var resImgData = this.canvasTxt.getImageData(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
                    this.canvasTxt.globalCompositeOperation = "destination-over"
                    this.canvasTxt.fillStyle = this.myBg
                    this.canvasTxt.fillRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
                    this.resultImg = this.$refs.canvas.toDataURL(imgFormat, imgQuality)
                    var resultImg = this.resultImg
                    this.canvasTxt.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
                    this.canvasTxt.putImageData(resImgData, 0, 0)
                    this.canvasTxt.globalCompositeOperation = "source-over"
                    if (this.isCrop) {
                        const crop_area = this.getCropArea(resImgData.data)
                        var crop_canvas = document.createElement('canvas')
                        const crop_ctx = crop_canvas.getContext('2d')
                        crop_canvas.width = crop_area[2] - crop_area[0]
                        crop_canvas.height = crop_area[3] - crop_area[1]
                        const crop_imgData = this.canvasTxt.getImageData(...crop_area)
                        crop_ctx.globalCompositeOperation = "destination-over"
                        crop_ctx.putImageData(crop_imgData, 0, 0)
                        crop_ctx.fillStyle = this.myBg
                        crop_ctx.fillRect(0, 0, crop_canvas.width, crop_canvas.height)
                        resultImg = crop_canvas.toDataURL(imgFormat, imgQuality)
                        crop_canvas = null
                    }
                    resolve(resultImg)
                })
                return pm
            },
            reset() {
                this.canvasTxt.clearRect(
                    0,
                    0,
                    this.$refs.canvas.width,
                    this.$refs.canvas.height
                )
                if (this.isClearBgColor) {
                    this.$emit('update:bgColor', '')
                    this.$refs.canvas.style.background = 'rgba(255, 255, 255, 0)'
                }
                this.points = []
                this.hasDrew = false
                this.resultImg = ''
            },
            getCropArea(imgData) {
                var topX = this.$refs.canvas.width;
                var btmX = 0;
                var topY = this.$refs.canvas.height;
                var btnY = 0
                for (var i = 0; i < this.$refs.canvas.width; i++) {
                    for (var j = 0; j < this.$refs.canvas.height; j++) {
                        var pos = (i + this.$refs.canvas.width * j) * 4
                        if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
                            btnY = Math.max(j, btnY)
                            btmX = Math.max(i, btmX)
                            topY = Math.min(j, topY)
                            topX = Math.min(i, topX)
                        }
                    }
                }
                topX++
                btmX++
                topY++
                btnY++
                const data = [topX, topY, btmX, btnY]
                return data
            },

            accomplish() {
                this.generate()
                    .then((res) => {
                        if (res) {
                            console.log(res)
                        }
                    })
                    .catch((err) => {
                        console.log("default.methods =>  => err ", err);
                        vant.Toast("签名不能为空！"); // 画布没有签字时会执行这里 'Not Signned'
                    });
            },
        },
    });
</script>

<style>
    [v-cloak] {
        display: none;
    }

    body {
        margin: 0px;
        padding: 0px;
    }

    .content {
        width: 100%;
        height: 100vh;
    }

    .layout {
        height: 100vh;
        min-height: 1350px;
        position: relative;
        background-color: #f9f9f9;
    }

    .title1 {
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .titleContent {
        position: absolute;
        width: 100%;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 21px;
        color: #fff;
        text-align: center;
    }

    .arrowLeft {
        position: absolute;
        top: 25%;
        left: 5%
    }

    .beforeContent {
        width: 100%;
        height: 80px;
        position: absolute;
        top: 210px;
        backdrop-filter: blur(10px);
    }

    .mainContent {
        position: absolute;
        width: 90%;
        left: 5%;
        top: 8%;
        color: #555;
        padding-bottom: 100px;
    }

    /*旧车处理方式*/
    .old-card {
        position: relative;
        border-radius: 9px;
        background-color: #FFFFFF;
        padding: 15px 15px;
        margin-bottom: 20px;
    }

    .text-car {
        font-size: 16px;
        font-weight: 700;
        margin: 15px 0;
        padding-bottom: 9px;
        text-align: center;
        border-bottom: 2px solid #f8edca;
    }

    .bot-pag {

        font-size: 14px;
        text-align: justify;
        line-height: 25px;
    }

    .bot-pag a {
        color: #2562AA;
    }

    .bot-pag p {
        text-indent: 17.5px;
    }

    .bot-pag span {
        font-weight: 700;
    }

    .sm {
        border: 1px solid #ffe4c7;
        background-color: #fff9ef;
        color: #a28a6e;
        font-size: 25px;
        padding: 30px;
        border-radius: 15px;
        line-height: 36px;
        margin-top: 25px;
        margin-bottom: 10px;
        display: flex;
        text-align: justify;
    }

    .bottomBgImg {
        position: absolute;
        left: 0;
        bottom: 0;
    }

    /*选择后展示相应材料图片*/
    .bottomImages {
        background-color: #ecf2ff;
        border-radius: 0 0 18px 18px;
        margin: 0 auto;
        padding: 0px 15px 50px;
        margin-bottom: 30px;
        text-align: center;
    }

    .infoImgTitle {
        width: 50%;
        height: 6vh;
        margin: 0 auto 10px;
        background: url("~@/assets/images/netsign/jccl3.png") no-repeat;
        background-size: 100% auto;
        color: #FFFFFF;
        font-size: 26px;
        line-height: 4vh;
        text-align: center;
    }

    /*下一步*/
    .ydbut {
        width: 100%;
        border-radius: 35px;
        border: 1px solid rgb(146, 190, 251);
        color: #949494;
        font-size: 35px;
    }

    .nextBtn {
        width: 100%;
        background: linear-gradient(to right, #576692, #353E67);
        border-radius: 28px;
        border: none;
        font-size: 32px;
        color: #fbe8d7;
    }

    .foot {
        height: 9vh;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
    }

    .btnArea {
        padding: 10px 18px
    }

    .btn_confirm {
        border-radius: 15px;
        height: 46px;
    }

    .down {
        text-align: center;
        padding-bottom: 60px;
        padding-top: 28px;
        font-size: 24px;
        color: #a8a8a6;
        line-height: 40px;
    }

    .firstWord::before {
        content: "";
        display: block;
        width: 80vw;
        height: 2px;
        background: #ededec;
        position: absolute;
        left: 50%;
        margin-left: -40vw;
        top: 17px;

    }

    .firstWord span {
        padding: 0 10px;
        background: #f5f5f5;
        position: relative;
    }

    img {
        background-image: linear-gradient(to bottom, #FFFFFF, transparent) !important;
    }

    .startSign {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        position: absolute;
        border-radius: 15px;
        height: 46px;
    }

    .selectTimeOutBtn{
        border-radius: 10px;
    }

    .esign {
        position: relative;
    }

    .esignTitle {
        margin-left: 15px;
        font-size: 18px;
        line-height: 6vh;
        font-weight: bold;
    }

    .esignRewrite {
        color: #488ee9;
        position: absolute;
        right: 15px;
        top: 15px;
    }

    canvas {
        max-width: 100%;
        display: block;
    }

    .sign-container {
        width: 95%;
        height: 219px;
        background: rgba(51, 51, 51, 0.1);
        border-radius: 8px 8px 8px 8px;
        padding: 8px;
    }

    .c-img {
        width: 100%;
        height: 100%;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid rgba(51, 51, 51, 1);
        position: relative;
    }

    .c-img:before {
        content: "签名区域";
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 34px;
        font-size: 32px;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: rgba(51, 51, 51, 0.2);
        line-height: 34px;
        position: absolute;
    }

</style>

</body>
</html>


